<template>
    <category :sonce="sonce"></category>

    <div v-show="sonce==0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-button type="primary" size="default" @click="addSpu" :icon="Plus">添加SPU</el-button>


            <el-table border stripe style="margin:20px 0" :data="spuList.records">
                <el-table-column label="序号" type="index" align="center" width="100px"></el-table-column>
                <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                <el-table-column label="SPU描述" prop="description"></el-table-column>
                <el-table-column>
                    <template #="{row,$index}">
                        <el-button type="primary" size="default" @click="addSkuList(row)" :icon="CirclePlusFilled">
                        </el-button>
                        <el-button type="warning" size="default" @click="updateSpu(row)" :icon="InfoFilled"></el-button>
                        <el-button type="info" size="default" @click="dialogClick(row)" :icon="Comment"></el-button>
                        <el-button type="danger" size="default" @click="" :icon="DeleteFilled"></el-button>

                    </template>
                </el-table-column>
            </el-table>

            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 7]"
                background layout=" prev, pager, next, jumper,->,total, sizes" :total="spuList.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />


        </el-card>
    </div>
    <addSku v-show="sonce==2" ref="skuRef" @figure="figure"></addSku>
    <Spu v-show="sonce==1" @figure="figure" ref="spuRef"></Spu>

    <el-dialog v-model="dialogTableVisible" title="sku列表">

        <el-table :data="skuParams">
            <el-table-column property="skuName" label="名称" width="150" />
            <el-table-column property="price" label="价格(元)" width="200" />
            <el-table-column property="weight" label="重量(千克)" />
            <el-table-column label="默认图片">
                <template #="{row,$index}">
                    <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px;">
                </template>

            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script setup lang="ts">
import category from '@/components/category/category.vue'
import { ref, onMounted, watch } from 'vue'
import CStore from '@/stores/attr'
import { reqSpuList,reqSkuLisk } from '@/api/product/spu/spu'

import { Plus, DeleteFilled, CirclePlusFilled, InfoFilled, Comment } from '@element-plus/icons-vue';

import addSku from './addSku.vue'
import Spu from './addOrUpdateSpu.vue'

let currentPage = ref(1)
let pageSize = ref(3)
let sonce = ref(0)
let categoryStore = CStore()
let spuList = ref({})
let spuRef = ref<any>()
let skuRef = ref<any>()
let dialogTableVisible = ref(false)

let skuParams = ref([])

const dialogClick = async (row) => {
    dialogTableVisible.value = true
    let result = await reqSkuLisk(row.id)
    skuParams.value = result
    console.log(result);
    console.log(skuParams.value);
    
    
}


watch(
    () => categoryStore.c3ID,
    () => {
        if (categoryStore.c3ID == '') return;
        getSpuList()
    })
let getSpuList = async () => {
    let result = await reqSpuList(currentPage.value, pageSize.value, categoryStore.c3ID)
    spuList.value = result
}
//点击分页器的数字触发
let handleCurrentChange = (page: number = 1) => {
    currentPage.value = page
    getSpuList()
}
//点击修改按钮切换页面1
let updateSpu = (row) => {
    sonce.value = 1
    spuRef.value.getSpuDataList(row)
}
//点击添加按钮的回调
let addSpu = () => {
    sonce.value = 1
    spuRef.value.getSpuDataAdd(categoryStore.c3ID)
}
//子组件的自定义事件的回调
let figure = ({ soene, flag }) => {
    sonce.value = soene
    if (flag == 'updata') {

        handleCurrentChange(currentPage.value)
    } else {

        handleCurrentChange()
    }
}
//点击添加按钮 切换页面
let addSkuList = (row) => {
    sonce.value = 2
    skuRef.value.SonSku(categoryStore.c1ID, categoryStore.c2ID, row)
}
</script>

<style scoped>

</style>